import React,{Component} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
  Image
} from 'react-native';
import CheckBox from 'react-native-check-box';

var screenWidth=Dimensions.get('window').width;

const headerRightIcon=(
    <View style={{flexDirection:'row',alignItems:'center'}}>
    <Image
    style={{width:20,height:20}}></Image>
    <Text style={{fontSize:18,color:'#292c33'}}>    </Text>
    </View>
  );

export default class RegistScreen extends Component{

    static navigationOptions=({navigation,screenProps})=>({
          headerLeft:(
            <TouchableOpacity onPress={()=>navigation.state.params.pressBack()}>
            <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image source={require('../image/icon_message_back.png')} 
            style={{width:20,height:20}}></Image>
            <Text style={{fontSize:18,color:'#292c33'}}>返回</Text>
            </View>
            </TouchableOpacity>
          ),
          headerRight:headerRightIcon,
          headerTitle:'注册'
    });

    constructor(props){
        super(props);
        this.state={
           phoneNumber:'',
           buttonOpacity:1.0,
           buttonColor:'#c4c6cc',
           pressNable:true,
           checked:true,
        }
    }

    goToBack(){
        // alert('点击下一步');
        this.props.navigation.goBack(); 
    }

    componentDidMount(){
        this.props.navigation.setParams({
            pressBack:()=>this.goToBack()
        });
    }

    _onTextChange(text){
        this.setState({
            phoneNumber:text,
        })
        if(text){
            this.setState({pressNable:false,buttonColor:'#ff7733',buttonOpacity:0.5})
        }else{
            this.setState({pressNable:true,buttonColor:'#c4c6cc',buttonOpacity:1.0})
        }
    }

    _onPress(){
        alert('点击下一步');
     }

     onClick(checked){
        this.setState({checked:!checked});
     }

    render(){
        return(  
            <View style={styles.contain}>
                  <Text style={styles.text1}>请输入您的手机号</Text>
                  <View style={styles.inputContain}>
                      <Text style={styles.text2}>+86</Text>
                      <TextInput 
                       style={styles.input}
                       placeholder='手机号码'
                       placeholderTextColor='#c4c6cc'
                       onChangeText={(text)=>this._onTextChange(text)}
                       value={this.state.phoneNumber}
                       underlineColorAndroid='transparent'
                      >
                      </TextInput>
                  </View>
                  <TouchableOpacity
                   style={[styles.button,{backgroundColor:this.state.buttonColor}]}
                   activeOpacity={this.state.buttonOpacity}
                   onPress={this._onPress.bind(this)}
                   disabled={this.state.pressNable}
                  >
                   <Text style={styles.text3}>下一步</Text>
                  </TouchableOpacity>
                  <CheckBox
                    style={{marginTop:8}}
                    onClick={()=>this.onClick(this.state.checked)}
                    isChecked={this.state.checked}
                    rightText='我已阅读并同意《筑工邦用户协议》'
                    checkedImage={<Image source={require('../image/icon_selected.png')} style={{width:20,height:20}}/>}
                    unCheckedImage={<Image source={require('../image/icon_select.png')} style={{width:20,height:20}}/>}
                  >
                  </CheckBox>
            </View>
        );
    }

}

const styles=StyleSheet.create({
   contain:{
       flex:1,
       flexDirection:'column',
       backgroundColor:'#ffffff',
       paddingLeft:15,
       paddingRight:15
   },
   inputContain:{
    flexDirection:'row',
    alignItems:'center',
    marginTop:20,
    backgroundColor:'#f2f3f5',
    borderRadius:4,
    paddingLeft:8,
    paddingRight:8
   },
   input:{
    fontSize:16,
    flex:1,
    marginLeft:4
   },
   text1:{
       fontSize:16,
       color:'#5c5f66',
       alignSelf:'center',
       marginTop:20,
   },
   text2:{
    fontSize:16,
    color:'#5c5f66',
  },
   text3:{
    fontSize:16,
    color:'#ffffff',
  },
  button:{
    marginTop:30,
    borderRadius:5,
    alignSelf:'center',
    justifyContent:'center',
    alignItems:'center',
    height:45,
    width:screenWidth-30,
   },

});